<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/layui/src/css/layui.css">
    <script src="/static/layui/src/layui.js"></script>
    <script src="/static/common/js/dj.js?v=3"></script>
    <script src="/static/common/js/selfLayui.js?v=2"></script>

    <script>
        layui.config({version: <?php echo time();?>});
    </script>

    <style type="text/css">
        .layui-input-inline-long {
            float: left;
            width: 600px;
            margin-right: 10px;
        }
        .layui-table-cell {
            height: auto ;
            white-space: normal;
            word-wrap:break-word;
        }
    </style>
</head>

<script type="text/html" id="indexTpl">
	@{{d.LAY_TABLE_INDEX+1}}
</script>

<script type="text/javascript">
    layui.config({
        base: '/static/common/js/layui_exts/'
    }).extend({
        selectInput: 'selectInput/selectInput'
    });
    layui.use(['form'], function() {
        const form = layui.form;

        //常规表单验证
        form.verify({
            lengthCheck10: lengthCheck10,
            lengthCheck30: lengthCheck30,
            lengthCheck120: lengthCheck120,
        });
    });
</script>

<style type="text/css">
    body{
        background-color: #eee;
    }
    .left_tab {
        background-color: #009688;
    }
    .layui-card-header {
        height: auto;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 上面部分 -->
    <div class="layui-header">
        <!--<div class="layui-logo"><img style="height: 50px;" src="{$base_url_static}/common/img/logo.png?v=2"/></div>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    {{$username}}
                </a>
                <dl class="layui-nav-child">
                    <dd><a id="changePassword" href="javascript:void(0);">修改密码</a></dd>
                </dl>

            </li>
            <li class="layui-nav-item"><a href="<?php echo route('logout'); ?>">退出</a></li>
        </ul>
        <!--<div style="float: right;"><a href="javascript:void(0);" class="door_lv" data-type="open" id="btn-open">开门</a></div>-->
    </div>

    <!-- 左侧部分 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="left_tab" class="layui-nav layui-nav-tree"  lay-filter="test" lay-shrink="">

            </ul>
        </div>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding: 20px;">
            @yield('content')
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.use(['element', 'table'], function(){
        const element = layui.element;

        const $ = layui.$
        const selfLayui = new SelfLayui(layui,$);

        //一些事件监听
        element.on('tab(demo)', function(data){
            console.log(data);
        });

        // 获取菜单
        function getMenu() {
            const $ = layui.$;
            const element = layui.element;

            //获取菜单
            $.getJSON("/admin/system/menu/getData",function(d) {
                if(d.code != 0) {
                    layer.msg('菜单获取失败');
                    return false;
                }

                createMenu($, d.data, 'left_tab');
                element.render('test');
                //初始时候全部菜单改为收缩状态
                $('.layui-nav-item').removeClass('layui-nav-itemed');

                //改变左侧菜单颜色
                const url = window.location.href;
                $('#left_tab > li').each(function() {
                    if($(this).find('dl').html() != 'undefined') {
                        $(this).find('dl').find('dd').each(function() {
                            const url_li = $(this).find('a').attr('href');
                            if(url_li == url) {
                                $(this).parent().parent().addClass('layui-nav-itemed'); //已经选定的父级菜单展开
                                $(this).addClass('left_tab');
                            }
                        });
                    }
                    const url_li = $(this).find('a').attr('href');
                    if(url_li == url || url_li+'.html' == url) {
                        $(this).addClass('left_tab');
                    }
                    //首页默认路径情况下
                    if(url_li == '{:url("index/index")}' && url == '/admin/.html') {
                        $(this).addClass('left_tab');
                    }
                });
            });
        }

        getMenu();

        $('#changePassword').on('click', function() {
            selfLayui.openAdd('修改密码', '<?php echo route("changePassword");?>')
        })

        // 点击空白关闭弹窗
        $('body').on('click', '.layui-layer-shade', function() {
            layer.close(layer.index);
        })
    });

</script>
</html>
